<template>
	<view class="content">
		<!-- <view class="tab">
			<view class="tab-item" @click="tab_select(2)" :class="{'tab-item-active':tab_index == 2}">
				<text>全部</text>
				<text class="tab-item-line" v-show="tab_index == 2"></text>
			</view>
			<view class="tab-item" @click="tab_select(0)" :class="{'tab-item-active':tab_index == 0}">
				<text>待处理</text>
				<text class="tab-item-line" v-show="tab_index == 0"></text>
			</view>
			<view class="tab-item" @click="tab_select(1)" :class="{'tab-item-active':tab_index == 1}">
				<text>已完成</text>
				<text class="tab-item-line" v-show="tab_index == 1"></text>
			</view>
		</view> -->




		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="(item,index) in list" @click="toDetail(item)" :key="index">
				<view class="item-top">
					<text>订单号：{{item.order_no||item.sn}}</text>
					<text class="">{{item.status_info}}</text>
				</view>
				<view class="item-con">
					<view class="item-con-children">
						<view class="item-con-img">
							<image :src="item.products.image" mode="aspectFill"></image>
						</view>
						<view class="goods-right">
							<view class="goods-title">
								{{item.products.title}}
							</view>
							<view class="goods-num">
								<text>×{{item.products.num}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item-b1 " v-if="is_refund_service">
					<text>{{item.status_info}}</text>
					<text v-if="item.status == 1">等待商家确认退款</text>
					<text v-else-if="item.status == 2">请按商家地址将产品寄回</text>
					<text v-else-if="item.status == 3">待卖家退款</text>
					<!-- <text v-else-if="item.status == 6">：退款成功</text> -->
					<text v-else></text>
				</view>
				<!-- 可申请售后的列表 -->

				<block v-if="is_refund_order">
					<view class="item-btns">
						<view @click="toRoute('/refund-type?id='+item.order_id + '&gid=' + item.inventoryId)">
							申请售后
						</view>
					</view>
				</block>

				<!-- <block v-else>
					<view class="item-btns"  v-if="item.status == 0" @click="quxiao_order(item,index)">
						<view>取消退货</view> 
					</view>
					<view class="item-btns" v-if="item.status == 2" @click="toRoute('kuaidi_info/kuaidi_info?id='+item.id)">
						<view class="item-btn2">填写快递信息</view> 
					</view>
					<view class="item-btns" v-if="item.status == 5" @click="qrShouHuo(item,index)">
						<view class="item-btn2"  >确认收货</view> 
					</view>
				</block> -->
			</view>
			<uni-load-more :status="status_load"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				tab_index: 2,
				status_load: 'more',
				list: [],
				params: {
					page: 1,
					pageNum: 10,
					status: 2,
				},

				tabSelect: {}
			}
		},

		computed: {
			is_refund_order() {
				return this.tabSelect.title == '申请售后'
			},
			is_refund_service() {
				return this.tabSelect.title != '申请售后'
			}
		},

		// onReachBottom() {
		// 		this.loadMore()
		// },
		// onLoad() {
		// 	// this.tab_index = this.$mp.query.type || 0
		// 	this.loadInit();
		// },
		methods: {
			init(option) {
				console.log('售后查询 option', option)
				this.tabSelect = option


				this.loadInit();
			},

			loadInit() {
				this.list = []
				this.status_load = 'more'
				this.params.page = 1
				this.params.scene = this.tab_index

				this.setView()
			},
			loadMore() {
				if (this.status_load == 'noMore') {
					return false;
				}

				this.setView()
			},

			setView() {
				if (this.tabSelect.title == '申请售后') {
					this.get_list()
				} else {
					this.get_dai_list()
				}


				// if (this.tab_index == 2) {
				// 	this.get_list()
				// } else {
				// 	this.get_dai_list()
				// }
			},


			toDetail(item) {
				console.log(item)
				if (item.ifRefund == 0) {
					return;
				} else {
					let id = item.order_id || item.id
					this.toRoute('/refund-service-detail?id=' + id)
				}
			},


			tab_select(index) {
				this.Loading(3000)
				this.list = []
				this.status_load = 'more'
				this.params.page = 1
				this.tab_index = index
				this.params.status = this.tab_index

				this.setView();

			},
			get_list() {
				this.status_load = 'loading'
				let params = this.params


				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_afterSaleList',
						...params
					},
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					let data = res.data.list || []
					if (!this.empty(data)) {
						this.list = this.list.concat(data)
					}

					console.log(this.list, 6666)
					if (params.pageNum == data.length) {
						this.params.page += 1;
						this.status_load = 'more'
					} else {
						this.status_load = 'noMore'
					}
				})
			},
			get_dai_list() {
				this.status_load = 'loading'
				let params = this.params

				let status = {
					'处理中': 0,
					'已完成': 1
				} [this.tabSelect.title]

				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_lists',
						...params,
						status: status, //	当前状态(0待处理 1已完成 )
					},
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					let data = res.data.list || []
					if (!this.empty(data)) {
						this.list = this.list.concat(data)
					}

					console.log(this.list, 6666)
					if (params.pageNum == data.length) {
						this.params.page += 1;
						this.status_load = 'more'
					} else {
						this.status_load = 'noMore'
					}
				})
			},
			//取消订单
			quxiao_order(item, index) {
				uni.showModal({
					title: "确认取消",
					success: (res) => {
						if (res.confirm) {
							this.$api({
								url: '/service.php',
								method: 'get',
								data: {
									action: 'refund_qxRefund',
									id: item.id
								},
							}).then(result => {
								this.$alert(result.message);
								if (result.code == 200) {
									this.list.splice(index, 1)
								}
							})
						}
					}
				})
			},
			qrShouHuo(item, index) {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_qrShouHuo',
						id: item.id
					},
				}).then(res => {
					let {
						code,
						data,
						message
					} = res
					if (code == 200) {
						this.$set(this.list[index], 'status', '6')
					} else {
						this.$alert(message)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		/* background: #F6F6F6; */
	}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
	}

	.tab {
		display: flex;
		position: fixed;
		z-index: 10;
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		top: 0;
		box-shadow: 0rpx 4rpx 10rpx 2rpx rgba(0, 0, 0, 0.03);

		/* box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.3) ; */
		.tab-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			font-size: 26rpx;
			color: #939393;
			line-height: 106rpx;

			.tab-item-line {
				width: 80rpx;
				height: 4rpx;
				background: $color;
			}
		}

		.tab-item-active {
			color: #000000;
		}
	}



	.list {
		display: flex;
		flex-direction: column;
		margin-top: 0rpx;
		padding-left: 0;
		padding-right: 0;

		.item {
			display: flex;
			flex-direction: column;
			padding: 28rpx 24rpx 32rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 24rpx;
					color: #999999;

					&:nth-child(2) {
						font-size: 24rpx;
						color: #000000;
					}
				}
			}
		}
	}

	/* .item-del{
		display: flex;
		height: 100%;
		width: 60rpx;
		justify-content: center;
		align-items: center;
	} */
	.item-con {
		display: flex;
		flex-direction: column;
		padding-top: 36rpx;
		padding-bottom: 40rpx;

		/* border-bottom: 1px solid #EEEEEE; */
		.item-con-children {
			display: flex;

			.item-con-img {
				display: flex;
				width: 168rpx;
				height: 168rpx;

				image {
					width: 168rpx;
					height: 168rpx;
				}
			}

			.goods-right {
				overflow: hidden;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;

				.goods-title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}

				.goods-num {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						&:nth-child(1) {
							color: #828282;
							font-size: 26rpx;
						}

						&:nth-last-of-type(1) {
							font-size: 32rpx;
							color: $color;
						}
					}
				}
			}

			.item-con-r {
				display: flex;
				flex: 1;
				flex-direction: column;
				margin-left: 20rpx;

				.item-font1 {
					width: 500rpx;
					line-height: 50rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 24rpx;
					color: #333333;
				}

				.item-font2 {
					display: flex;
					line-height: 60rpx;
					color: #828282;
					font-size: 26rpx;
				}

				.item-font3 {
					display: flex;
					line-height: 50rpx;
					font-size: 32rpx;
					color: $color ;
				}
			}
		}
	}

	.item-b1 {
		display: flex;
		font-size: 24rpx;
		color: #000000;
		background: #F5F5F5;
		border-radius: 8rpx;
		padding: 12rpx 16rpx;

		text {
			&:nth-child(1) {
				font-size: 24rpx;
				margin-right: 64rpx;
			}

			&:nth-child(2) {
				font-size: 24rpx;
				color: #9695A3;
			}
		}
	}

	.item-btns {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;

		>view {
			display: flex;
			font-size: 24rpx;
			color: #333333;
			padding: 10rpx 22rpx;
			border-radius: 10rpx;
			background: #F6F6F6;
		}
	}

	.item-btn {
		display: flex;
		font-size: 24rpx;
		color: #333333;
		padding: 10rpx 22rpx;
		border-radius: 10rpx;
		background: #F6F6F6;
	}

	.item-btn2 {
		color: #df1f1f;
		border: 1px solid #df1f1f;
	}
</style>